<template>
	<view class="searchPage">
		<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @cancel="cancel"
			bgColor="rgba(255,255,255,0.2)" placeholder="请输入要搜索的内容" class="searchbox"></uni-search-bar>
		<view class="" type="center" @click="close">
			<uni-popup ref="popup" :mask-click="false" class="popup">
				<view class="popup-content">
					<text class="popup-text">清空搜索记录？</text>
					<view class="popup-btn">
						<text class="btn-close" @click="close">取消</text>
						<text class="btn-confirmBtn" @click="confirmBtn">确认</text>
					</view>
				</view>
			</uni-popup>
		</view>
		<view class="" v-show="searchValue">
			<view>
				<view class="options">
					<view class="option" @click="updataCurrent(0)">
						<text :class="{active:current==0}">{{typew}}</text>
						<svg v-show="current!=0" t="1639204957965" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="2331" width="12" height="12">
							<path
								d="M979.0208 301.99808l-47.104-47.04768-419.98848 419.9424-419.89632-419.9424-47.0528 47.0528 419.89632 419.93728v0.00512l47.09888 47.104 47.04256-47.0528z"
								p-id="2332" fill="#9b9b9b"></path>
						</svg>
						<svg v-show="current==0" t="1639205026479" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="3285" width="12" height="12">
							<path d="M960.1 699.7l-72.8 72.8L512 397.1 136.7 772.5l-72.8-72.8L512 251.5z" fill="#ffffff"
								p-id="3286"></path>
						</svg>
					</view>
					<view class="option" @click="updataCurrent(1)">
						<text :class="{active:current==1}">{{orderw}}</text>
						<svg v-show="current!=1" t="1639204957965" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="2331" width="12" height="12">
							<path
								d="M979.0208 301.99808l-47.104-47.04768-419.98848 419.9424-419.89632-419.9424-47.0528 47.0528 419.89632 419.93728v0.00512l47.09888 47.104 47.04256-47.0528z"
								p-id="2332" fill="#9b9b9b"></path>
						</svg>
						<svg v-show="current==1" t="1639205026479" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="3285" width="12" height="12">
							<path d="M960.1 699.7l-72.8 72.8L512 397.1 136.7 772.5l-72.8-72.8L512 251.5z" fill="#ffffff"
								p-id="3286"></path>
						</svg>
					</view>
					<view class="option" @click="updataCurrent(2)">
						<text :class="{active:current==2}">{{catew}}</text>
						<svg v-show="current!=2" t="1639204957965" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="2331" width="12" height="12">
							<path
								d="M979.0208 301.99808l-47.104-47.04768-419.98848 419.9424-419.89632-419.9424-47.0528 47.0528 419.89632 419.93728v0.00512l47.09888 47.104 47.04256-47.0528z"
								p-id="2332" fill="#9b9b9b"></path>
						</svg>
						<svg v-show="current==2" t="1639205026479" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="3285" width="12" height="12">
							<path d="M960.1 699.7l-72.8 72.8L512 397.1 136.7 772.5l-72.8-72.8L512 251.5z" fill="#ffffff"
								p-id="3286"></path>
						</svg>
					</view>
				</view>
				<view class="content" v-if="searchObj&&current!=null">
					<view v-show="current === 0">
						<view class="order" v-for="(type,index) in searchObj.filter.type" :key="index"
							:class="{typeActive:type.key==typew}" @click="typew=type.key;current=null">
							{{type.key}}
						</view>
					</view>
					<view v-show="current === 1">
						<view class="order" v-for="(order,index) in searchObj.order" :key="index"
							:class="{typeActive:order.key==orderw}" @click="orderw=order.key;current=null">
							{{order.key}}
						</view>
					</view>
					<view v-show="current === 2" class="cates">
						<view class="cateWord" v-for="(cate,index) in [{catename:'全部频道'},...searchObj.filter.cate]"
							:key="index" :class="{cateActive:cate.catename==catew}"
							@click="catew=cate.catename;current=null">
							{{cate.catename}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="result" v-if="searchObj&&searchValue">
			<view class="resultTitle" v-if="searchObj.result">
				{{searchObj.result.total+"个相关"+typew}}
			</view>
			<DiscoverItem v-if="searchObj.result" :list="searchObj.result.list"></DiscoverItem>
			<view class="result-fail" v-else>
				未搜索到相关结果
			</view>
		</view>
		<view class="hots" v-show="!searchValue || notFound">
			<Words :list="searchwords.recommend_keywords" :bool="false" v-if="searchwords"
				@updata-searchValue="updataSearchValue($event)">
				<template v-slot:titleName>
					<text>热门搜索</text>
				</template>
			</Words>
		</view>
		<view class="history" v-show="!searchValue">
			<Words :list="history" :bool="true" v-if="searchwords" @updata-searchValue="updataSearchValue($event)"
				@open="open">
				<template v-slot:titleName>
					<text>历史记录</text>
				</template>
			</Words>
		</view>
	</view>
</template>

<script>
	import Words from '../../components/Words/Words';
	export default {
		components: {
			Words,
		},
		data() {
			return {
				searchValue: "",
				searchwords: null,
				current: null,
				typew: "影片",
				orderw: "默认排序",
				catew: "全部频道",
				searchObj: null,
				history: null,
				notFound: false,
			};
		},
		watch: {
			'$store.state.searchObj'(n) {
				this.searchObj = n;
			},
			searchValue(n) {
				if (!n) {
					this.current = null;
					this.typew = "影片";
					this.orderw = "默认排序";
					this.catew = "全部频道";
				}
			},
		},
		methods: {
			search(e) {
				this.storage(e.value);
				uni.request({
					url: `https://apis.netstart.cn/vmovier/search?kw=${e.value}`,
					success: (res) => {
						this.$store.commit('getSearchObj', {
							searchObj: res.data.data
						})
						if (!res.data.data.result) {
							this.notFound = true;
						}else{
							this.notFound = false;
						}
					}
				})
			},
			cancel() {
				this.$router.back();
			},
			updataSearchValue(event) {
				this.searchValue = event;
				this.storage(event);
				uni.request({
					url: `https://apis.netstart.cn/vmovier/search?kw=${event}`,
					success: (res) => {
						this.$store.commit('getSearchObj', {
							searchObj: res.data.data
						});
						if (!res.data.data.result) {
							this.notFound = true;
						}else{
							this.notFound = false;
						}
					}
				})
			},
			storage(word) {
				if (window.localStorage.getItem('search')) {
					let b = JSON.parse(window.localStorage.getItem('search'));
					let c = [{
						kw: word
					}, ...b];
					let obj = {};
					let a = c.reduce((cur, next) => {
						obj[next.kw] ? "" : obj[next.kw] = true && cur.push(next);
						return cur;
					}, [])
					a = JSON.stringify(a);
					window.localStorage.setItem('search', a);
				} else {
					let a = JSON.stringify([{
						kw: word
					}]);
					window.localStorage.setItem('search', a);
				}
				this.history = JSON.parse(window.localStorage.getItem('search'));
			},
			updataCurrent(num) {
				if (num == this.current) {
					this.current = null;
				} else {
					this.current = num;
				}
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			confirmBtn() {
				this.$nextTick(() => {
					window.localStorage.setItem('search', []);
					this.history = null;
				})
			}
		},
		onLoad() {
			if (this.$store.state.searchwords) {
				this.searchwords = this.$store.state.searchwords;
			} else {
				uni.request({
					url: 'https://apis.netstart.cn/vmovier/search',
					success: (res) => {
						this.searchwords = res.data.data;
					}
				})
			}
			if (window.localStorage.getItem('search')) {
				this.history = JSON.parse(window.localStorage.getItem('search'))
			}
		},

	}
</script>

<style lang="less">
	.searchPage {
		background-color: black;
		height: 100vh;

		/deep/ .uni-searchbar {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			z-index: 1;
			background-color: black;
			box-sizing: border-box;

			.uni-searchbar__cancel {
				color: #9b9b9b;
				line-height: 60rpx;
			}

			.uni-searchbar__box[data-v-180dbe05] {
				height: 60rpx;
				color: white;
			}

			.uni-input-input {
				color: #fff;
			}

			.uniui-clear[data-v-a2e81f6e]:before {
				color: rgb(121 121 122);
			}
		}

		.hots {
			transform: translateY(100rpx);
		}

		.history {
			transform: translateY(90rpx);
		}

		.options {
			display: flex;
			justify-content: space-between;
			position: fixed;
			top: 100rpx;
			left: 0;
			width: 100vw;
			background-color: black;
			z-index: 1;

			.option {
				flex: 1;
				text-align: center;
				color: #9b9b9b;
				line-height: 80rpx;
			}

			.active {
				color: #fff;
			}
		}

		.resultTitle {
			color: #9b9b9b;
			padding: 3vw;
		}

		.content {
			color: #fff;
			padding: 3vw;
			position: fixed;
			top: 180rpx;
			left: 0;
			height: calc(100vh - 180rpx);
			background-color: black;
			z-index: 1;
			width: 100vw;

			.order {
				line-height: 80rpx;

				&.typeActive {
					background-color: rgba(255, 255, 255, 0.1);
				}
			}

			.cates {
				display: flex;
				flex-wrap: wrap;

				.cateWord {
					color: #e6e6e6;
					padding: 0vw 2vw;
					border-radius: 5px;
					font-size: 24rpx;
					background-color: rgba(255, 255, 255, 0.1);
					line-height: 50rpx;
					margin: 1vw 0;
					margin-right: 4vw;
				}

				.cateActive {
					background-color: rgba(255, 255, 255, 0);
					border: 2rpx solid #969696;
					border-radius: 5px;
				}
			}
		}

		.result {
			margin-top: 180rpx;
		}
	}

	/deep/ .uni-popup__wrapper {
		// span {
		// 	display: block;
		// 	width: 86vw;
		// 	background-color: white;
		// height: 22vw;
		// padding: 3vw 5vw;
		// box-sizing: border-box;
		// border-radius: 3px;
		// }
	}

	.popup-content {
		background-color: white;
		position: relative;
		width: 86vw;
		height: 22vw;
		padding: 3vw 5vw;
		box-sizing: border-box;
		border-radius: 3px;
		display: flex;
		justify-content: space-between;

		.popup-btn {
			align-self: flex-end;
			color: blue;

			.btn-close {
				margin-right: 8vw;
			}
		}
	}

	.result-fail {
		color: #e6e6e6;
		transform: translateY(90rpx);
		text-align: center;
	}
</style>
